<template>
  <el-dialog
    v-model="dialogShow"
    destroy-on-close
    append-to-body
    :fullscreen="p.isfullScreen"
    :width="p.isfullScreen ? '100%' : p.width"
    :style="p.isfullScreen ? '' : 'height:' + p.height"
    style="background-color: '#122E5D'"
    :title="p.title"
    draggable
    @before-close="dialogShow = false"
  >
    <div class="parameterInfo">
      <el-row :gutter="20" v-for="(item, i) in parameterList" :key="i">
        <el-col :span="6"
          ><div class="grid-content ep-bg-purple" />
          {{ item.parameterName }}</el-col
        >
        <el-col :span="6"
          ><div class="grid-content ep-bg-purple" />
          <div class="parameterVal">
            {{ item.parameterValue }}
          </div>
        </el-col>
        <el-col :span="6"
          ><div class="grid-content ep-bg-purple" />
          {{ item.parameterCompany }}</el-col
        >
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content ep-bg-purple" />
          开关</el-col
        >
        <el-col :span="6"
          ><div class="grid-content ep-bg-purple" />
          <el-switch
            v-model="value2"
            class="ml-2"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
          />
        </el-col>
        <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  defineExpose,
  defineProps,
  getCurrentInstance,
  nextTick,
  inject,
} from "vue";
import axios from "axios";
import { getPointDefalut } from "@/api/business";

const mqtt: any = inject("$m");
const p = defineProps({
  title: {
    type: String,
    default: "弹窗标题",
  },
  paramSet: {
    type: Object,
    default: {},
  },
  width: {
    type: String,
    default: "40%",
  },
  height: {
    type: String,
    default: "60%",
  },
  isfullScreen: {
    type: Boolean,
    default: false,
  },
});
let dialogShow = ref(false);
const value1 = ref(true);
const value2 = ref(true);
const paramSet = p.paramSet;
const nodeKeyList = [];
const resDataList = reactive([]);
//mqtt 初始化
const mqtt_info = () => {
  let topic = ["web/3400"];
  mqtt.subscribe(topic, 0); //订阅topic
  topic.forEach((t) => {
    mqtt.message_callback(t, (topic: string, payload: Buffer) => {
      let payloadData = JSON.parse(payload.toString());
      console.log("topic：", topic, "mqttData:", payloadData);
      payloadData.forEach((r) => {
        parameterList.forEach((p) => {
          if (p.nodeKey == r.nodeKey) {
            p.parameterValue = r.nodeValue;
          }
        });
      });
    });
  });
};
const parameterList = reactive([
  {
    nodeKey: p.paramSet.outletPressure,
    parameterName: "出口压力",
    parameterValue: "",
    parameterCompany: "",
  },
  {
    nodeKey: p.paramSet.exhaustTemperature,
    parameterName: "排气温度",
    parameterValue: "",
    parameterCompany: "",
  },
  {
    nodeKey: p.paramSet.runningTime,
    parameterName: "运行时间",
    parameterValue: "",
    parameterCompany: "",
  },
  {
    nodeKey: p.paramSet.loadingTime,
    parameterName: "加载时间",
    parameterValue: "--",
    parameterCompany: "小时",
  },
  {
    nodeKey: p.paramSet.operatingCurrent,
    parameterName: "运行电流",
    parameterValue: "",
    parameterCompany: "",
  },
  {
    nodeKey: p.paramSet.drumPressure,
    parameterName: "油气桶压力",
    parameterValue: "",
    parameterCompany: "",
  },
  {
    nodeKey: p.paramSet.barrelTemperature,
    parameterName: "油气桶温度",
    parameterValue: "",
    parameterCompany: "",
  },
]);
for (let i in paramSet) {
  if (paramSet[i] != "") {
    nodeKeyList.push(paramSet[i]);
  }
}
getPointDefalut({ nodeKeyList }).then((res) => {
  if (res.code === 200) {
    res.data.forEach((r) => {
      parameterList.forEach((p) => {
        if (p.nodeKey == r.subTable) {
          p.parameterValue = r.originNodeValue;
          p.parameterCompany = r.nodeUnit;
        }
      });
    });
    mqtt_info();
  }
});
const openDialog = () => {
  dialogShow.value = true;
};
const consoleSomeThing = () => {
  console.log("我是一个子组件，我被调用了");
};
defineExpose({ openDialog, consoleSomeThing });
</script>

<style lang="scss" scoped>
.parameterInfo {
  width: 60%;
  margin: auto;
  font-size: 20px;
  font-weight: 600;
}
.parameterVal {
  width: 100%;
  background-color: #2daeff25;
  text-align: center;
  border-radius: 10px;
  border: 1px solid #52bcff;
  box-shadow: 0 0 15px #52bcff;
  padding: 5px 0;
}
</style>

<style lang="scss">
.el-row {
  justify-content: space-around;
  align-items: center;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.el-dialog.is-draggable .el-dialog__header {
  width: calc(100% - 40px);
  background-color: #09162dfa;
  padding-bottom: 20px;
}
.el-dialog__title {
  color: #fff;
  font-size: 25px;
  font-weight: 800;
  text-shadow: 0px 0px 20px #2daeff;
  font-style: italic;
}
.el-dialog__body {
  // background-color: #0b2d63e8;
  background-color: #09162dfa;
  color: #fff;
}
.el-dialog__headerbtn {
  font-size: 30px;
}
</style>
